トーナメント表の作り方

トーナメント表作成の仕方

ＴＡＢＬＥタグを使ってトーナメント表を作る手順を紹介します。
エクセルで作ってＧＩＦ画像で作るのも出来ますが今回はタグで作ります。
テーブルのスタイルを変えてやります。

１、枠なしのテーブルを縦４列横６列作ります。

　　<TABLE cellspacing="0">→cellspacing="0"が枠なし

２、縦４列を結合して縦２列に変えます。

　　<TD rowspan="2"></TD>→rowspan="2"が２つ結合

３、横線と縦線を入れ「￢」を作る。

　　<TD style="border-top-width : thin;border-right-width : thin;border-top-style : solid;border-right-style : 　　solid;border-top-color : black;border-right-color : black;"></TD>
　　　　　　　↓
　　border-top-widthで枠の上の部分だけ線を入れる。
　　border-top-style :solidは上の線のスタイルはsolid（薄めの線）
　　border-top-color : blackは、上の線の色は黒

４、あとは、同じ要領で枠を作っていく。
　　枠の中が何も書かれていない状態だと線が表示されないので、
　　うまく「-」などを背景色入れ、目立たない様にする。。
　　
　分かりやすい様に枠表示して書きます。
　青の塗り潰し部分に空白（もしくは文字を入れる）を入れないと枠が表示されません。
　空白＝スペースキーで対処。
　空白だと分かりづらいので、文字入れます。